<!DOCTYPE html>
<div>
<head>
    <title>(贵州)智慧巡检 设备二级点检表 巡检记录</title>
    <!--
    <meta name="viewport" content="width=device-width, initial-scale=1.0 Access-Control-Allow-Origin">
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 引入 Bootstrap -->
    <!--<link href="<?=base_url('html/bootstrap_v3/css/bootstrap.css')?>" rel="stylesheet">-->
    <link href="<?=  base_url('/html/bootstrap_v3/css/bootstrap.css')?>" rel="stylesheet">
    <link href="<?=base_url('html/bootstrap_v3/datepicker/css/bootstrap-datetimepicker.min.css')?>" rel="stylesheet">
    <script src="<?=base_url('html/js/jquery-1.8.3.min.js')?>"></script>
    <script src="<?=base_url('html/bootstrap_v3/js/bootstrap.min.js')?>"></script>
    <script src="<?=base_url('html/bootstrap_v3/datepicker/js/bootstrap-datetimepicker.js')?>"></script>
    <script src="<?=base_url('html/bootstrap_v3/datepicker/js/locales/bootstrap-datetimepicker.zh-CN.js')?>"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script>
        /*
         * 注意：
         * 1. 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
         * 2. 如果发现在 Android 不能分享自定义内容，请到官网下载最新的包覆盖安装，Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
         * 3. 常见问题及完整 JS-SDK 文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
         *
         * 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决，如仍未能解决可通过以下渠道反馈：
         * 邮箱地址：weixin-open@qq.com
         * 邮件主题：【微信JS-SDK反馈】具体问题
         * 邮件内容说明：用简明的语言描述问题所在，并交代清楚遇到该问题的场景，可附上截屏图片，微信团队会尽快处理你的反馈。
         */
        wx.config({
            debug: false,
            appId: '<?=$appId;?>',
            timestamp: <?=$timestamp;?>,
            nonceStr: '<?=$nonceStr;?>',
            signature: '<?=$signature;?>',
            jsApiList: [
                // 所有要调用的 API 都要加到这个列表中
                'scanQRCode',
                'chooseImage',
                'previewImage',
                'uploadImage',
                'downloadImage',
            ]
        });
        wx.ready(function () {
            // 在这里调用 API
            document.querySelector('#test').onclick = function () {
                wx.scanQRCode({
                    needResult: 1,
                    desc: 'scanQRCode desc',
                    success: function (res) {
                        //alert(JSON.stringify(res));
                        var result = res.resultStr;
                        alert(result);
                    }
                });
            };
            var images = {
                localId: [],
                serverId: []
            };
            document.querySelector('#choose').onclick = function(){
                wx.chooseImage({
                    success: function (res) {
                        /*
                        if(res.localIds.length > 1){
                            alert("只能选择一张图片",null);
                            return;
                        }
                        */
                        images.localId = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                        alert('已选择 ' + res.localIds.length + ' 张图片');

                        if (images.localId.length == 0) {
                            alert('请先选择要上传的图片');
                            return;
                        }
                        var i = 0, length = images.localId.length;
                        images.serverId = [];
                        function upload() {
                            wx.uploadImage({
                                localId: images.localId[i],
                                success: function (res) {
                                    i++;
                                    alert('已上传：' + i + '/' + length);
                                    images.serverId.push(res.serverId);
                                    $.ajax({
                                        type:"GET",
                                            isShowProgressTips: 1, // 默认为1，显示进度提示
                                            url:"<?=base_url()?>/createFile/downloadfile?mediaid="+res.serverId,
                                        success:function(data){
                                            var html = "<img src='<?=base_url()?>/"+data+"' width='320px'>"
                                            //alert(html);
                                            $("#showimg").append(html);
                                        },
                                        error:function(msg){

                                        }
                                    })
                                    if (i < length) {
                                        upload();
                                    }
                                    if(i==length){
                                        //alert(images.serverId);
                                    }
                                },
                                fail: function (res) {
                                    alert(JSON.stringify(res));
                                }
                            });
                        }
                        upload();
                    }
                });
            }



            /*
            document.querySelector('#upload').onclick = function(){
                wx.uploadImage({
                    localId: localIds, // 需要上传的图片的本地ID，由chooseImage接口获得
                    isShowProgressTips: 1// 默认为1，显示进度提示
                    success: function (res) {
                        //var serverId = res.serverId; // 返回图片的服务器端ID
                    }
                });
            }
            document.querySelector('#preview').onclick = function(){
                wx.previewImage({
                    current: '', // 当前显示图片的http链接
                    urls: [] // 需要预览的图片http链接列表
                });
            }
            document.querySelector('#upload').onclick = function(){
                wx.uploadImage({
                    localId: '', // 需要上传的图片的本地ID，由chooseImage接口获得
                    isShowProgressTips: 1// 默认为1，显示进度提示
                    success: function (res) {
                        var serverId = res.serverId; // 返回图片的服务器端ID
                    }
                });
            }
            document.querySelector('#download').onclick = function(){
                wx.downloadImage({
                    serverId: '', // 需要下载的图片的服务器端ID，由uploadImage接口获得
                    isShowProgressTips: 1// 默认为1，显示进度提示
                    success: function (res) {
                        var localId = res.localId; // 返回图片下载后的本地ID
                    }
                });
            }
			*/
        });

        $(document).ready(function () {
            $("#submit").click(function(){
                var userName = $("#userName").val();
                var userDeptName = $("#userDeptName option:selected").val();
                var createTime = $("#createTime").val();
                var clearLine = $("#clearLine option:selected").val();
                var isLouLiao = $("#isLouLiao input:checked").val();
                var isPoSun = $("#isPoSun input:checked").val();
                var beforeImgSrc = $("#beforeImgSrc").val();
                var afterImgSrc = $("#afterImgSrc").val();

            })
        })


    </script>
    <style type="text/css">
        .form-group{padding-top: 30px;}
    </style>
    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<div>
    <div class="container">
        <div style="margin-top: 0px;"></div>
            <div class="">
                <h1>包装-振筛网清理
                    <small>巡检记录</small>
                </h1>
            </div>
            <div class="form-group">
                <lable class="col-xs-3 span3 control-label">
                    填写人:
                </lable>
                <div class="input-group col-xs-9 span9">
                    <input type="text" class="form-control" rows="2" id="userName" name="userName">
                </div>
            </div>

            <div class="form-group">
                <lable class="col-xs-3 span3 control-label">
                    所在部门:
                </lable>
                <div class="input-group col-xs-9 span9">
                    <select class="userDeptName form-control" id="userDeptName" data-style="btn-primary" data-width="100%" title="请选择所在的部门">
                        <option data-hidden="true" value="" disable>---请选择所在的部门---</option>
                        <option value="部门一">部门一</option>
                        <option value="部门二">部门二</option>
                        <option value="部门三">部门三</option>
                    </select>

                </div>
            </div>

            <div class="form-group">
                <lable class="col-xs-3 span3 control-label">
                    填写时间:
                </lable>
                <div class="input-group col-xs-9 span9">
                    <?=date("Y-m-d H:i:s",$createTime)?>
                    <input type="hidden" class="form-control" rows="2" id="createTime" name="createTime" value="<?=$createTime?>" readonly="readonly">
                </div>
            </div>

            <div class="form-group">
                <lable class="col-xs-3 span3 control-label">
                    清理的线别:
                </lable>
                <div class="input-group col-xs-9 span9">
                    <select class="clearLine form-control" id="clearLine" data-style="btn-primary" data-width="100%" title="请选择清理的线别">
                        <option data-hidden="true" value="" disable>---请清理的线别---</option>
                        <option value="E">E</option>
                        <option value="F">F</option>
                        <option value="H">H</option>
                    </select>

                </div>
            </div>

            <div class="form-group">
                <lable class="col-xs-3 span3 control-label">
                    振筛边缘是否有漏料:
                </lable>
                <div id="isLouLiao">
                    <label class="radio-inline">
                        <input type="radio" name="isLouLiao" value="1"> 有漏料
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="isLouLiao" value="0"> 没有漏料
                    </label>
                </div>
            </div>

            <div class="form-group">
                <lable class="col-xs-3 span3 control-label">
                    筛网是否破损:
                </lable>
                <div id="isPoSun">
                    <label class="radio-inline">
                        <input type="radio" name="isPoSun" value="1"> 破损
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="isPoSun" value="0"> 正常
                    </label>
                </div>
            </div>

            <div class="form-group">
                <lable class="col-xs-3 span3 control-label">
                    清理前筛振照片:
                </lable>
                <div class="input-group col-xs-9 span9">
                    <input type="text" class="form-control" rows="2" id="beforeImgSrc" readonly="readonly" placeholder="请点击右侧按钮拍照并上传清理前筛振照片">
                    <span class="input-group-addon">
                         <span class="glyphicon glyphicon-camera beforeImgSrc"> </span>
                    </span>
                </div>
            </div>

            <div id="showBeforeImg"></div>

            <div class="form-group">
                <lable class="col-xs-3 span3 control-label">
                    清理后筛振照片:
                </lable>
                <div class="input-group col-xs-9 span9">
                    <input type="text" class="form-control" rows="2" id="afterImgSrc" readonly="readonly" placeholder="请点击右侧按钮拍照并上传清理后筛振照片">
                    <span class="input-group-addon">
                             <span class="glyphicon glyphicon-camera afterImgSrc"> </span>
                        </span>
                </div>
            </div>

            <div id="showAfterImg"></div>

            <div class="form-group">
                <button id="submit" type="button" class="btn btn-primary btn-lg btn-block">
                    提交
                </button>
            </div>
            <!--
            <p>
                <button id="test" type="button" class="btn btn-primary btn-lg btn-block">
                    调用二维码扫描
                </button>
            </p>
            <hr>
            <p>
                <button id="choose" type="button" class="btn btn-primary btn-lg btn-block">
                    调用相册或者摄像头上传图片
                </button>
            </p>
            <hr>
            <p>
            <div id="showimg"></div>
            </p>
            -->
        </div>
    </div>
</div>
<!--
<hr>
<p>
    <button id="upload" type="button" class="btn btn-primary btn-lg btn-block">
       上传图片
    </button>
</p>
<hr>
<p>
    <button id="download" type="button" class="btn btn-primary btn-lg btn-block">
       下载图片
    </button>
</p>
-->
</body>
</html>